<template>
  <div>
    <div class="login_container">
      <div
        style="
          text-align: center;
          line-height: 10rem;
          font-weight: 500;
          font-size: 2.25rem;
        "
      >
        用户注册
      </div>
      <el-form
        class="login_box"
        ref="RegisteredUser"
        label-width="90px"
        :model="addUser"
        :rules="rules"
      >
        <el-form-item prop="userName" label="用户名">
          <el-input v-model="addUser.userName"></el-input>
        </el-form-item>
        <el-form-item prop="passWord" label="密码">
          <el-input
            v-model="addUser.passWord"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="passWordTwo" label="确认密码">
          <el-input
            v-model="addUser.passWordTwo"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button type="info" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.addUser.passWordTwo !== "") {
          this.$refs.RegisteredUser.validateField("passWordTwo");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addUser.passWord) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      addUser: {
        userName: "",
        passWord: "",
        passWordTwo: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        passWord: [
          { validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        passWordTwo: [
          { validator: validatePass2, trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //提交
    submit() {
      this.$refs.RegisteredUser.validate((valid) => {
        if (valid) {
          this.register();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async register() {
      const { data: res } = await this.$http.post("/registered", {
        userName: this.addUser.userName,
        passWord: this.addUser.passWord,
      });
      if (res.code != 200) {
        return this.$message.error(res.data);
      }
      this.$message.success("注册成功");
      this.$router.push("/login");
    },
    //取消
    cancel() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang='less' scoped>
.login_container {
  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .btns {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
